<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{js/jquery.min.js}"></script>
    <script th:src="@{js/echarts.min.js}"></script>
</head>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    #form {
        padding-top:600px;
        width:400px;
        height:500px;
    }
    #btn {
        padding:8px 20px;
        color:#fff;
        background:#141414;
        border-radius:4px;
        transition: all  1s ease;
    }
    #btn:hover{
        background:#60c;transition: all  1s ease;
    }
</style>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="echart" style="height:400px;width:500px">
    <h1>欢迎来到echart首页</h1>
</div>
<input type ="button" value="下载" onclick="fn()"/>
<!-- ECharts单文件引入 -->
</body>
<script type="text/javascript">
    var myChart ;
    $(function(){
        //获得后台数据
        var category;//年代
        var child;//孩子
        var old;//老人
        var man;//大人
        $.ajax({
            url:'/viewEcharts',
            async:false,
            dataType: "json",
            cache: false,
            success: function(data){
                category=data.category;
                child=data.child;
                old=data.old;
                man=data.man;
                // 基于准备好的dom，初始化echarts图表
                myChart = echarts.init(document.getElementById('echart'),"echart");
                var option = {
                    tooltip: {//提示框，鼠标悬浮交互时的信息提示
                        show: true
                    },
                    toolbox:{//定义工具按钮
                        show : true,
                        feature : {
                            dataView : {show: true, readOnly: false},//数据信息按钮
                            magicType : {show: true, //显示折线、柱状图等切换按钮
                                // type: ['line', 'bar','stack', 'tiled','pie','radar']}
                                type: ['line', 'bar','stack', 'tiled','pie','radar']}
                        }
                    },
                    legend: {//图例
                        data:['孩子','老人','大人']
                    },
                    xAxis : [//x轴设置
                        {
                            type : 'category',//x轴显示类别
                            data : category//年代
                        }
                    ],
                    yAxis : [//y轴设置
                        {
                            type : 'value'///y轴显示数据值
                        }
                    ],
                    series : [
                        {
                            "name":"孩子",
                            "type":"pie",
                            "data":child
                        },
                        {
                            "name":"老人",
                            "type":"pie",
                            "data":old
                        },
                        {
                            "name":"大人",
                            "type":"pie",
                            "data":man
                        }
                    ]
                };

                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        })

    });

    function fn () {
        var data = {};
        data.picBase64Info1 = myChart.getDataURL();
        $.ajax({
            url:'/exportReport',
            type:"post",
            data:data,
            dataType:"json",
            success:function(data1){
                if('faild' == data1.ret){
                    alert('下载失败请重试...');
                }else{
                    //window.location.href = '../'+data1.ret;
                    alert('下载成功。。。。。')
                }
            }
        });
    }
    </script>
</html>